<template>
  <div v-if="renderOpts.button.show">
    <vxe-button
      @click="buttonClick(defaultparams, showMenu)"
      :type="defaultparams.button.status"
      class="toolbar-btn"
      :disabled="disabled"
      :style="{ background: disabled ? '#bebebe' : defaultparams.button.color }"
    >
      <el-icon class="el-icon--left" :size="12">
        <component :is="defaultparams.button.icon" />
      </el-icon>
      {{ defaultparams.button.name }}
      <template v-if="showMenu && !disabled" #dropdowns>
        <vxe-button
          type="text"
          v-for="(item, k) in defaultparams['button']['children']"
          :key="k"
          transfer
          @click="buttonClick(item)"
        >
          <el-icon class="el-icon--left" :size="12">
            <component :is="item.icon" />
          </el-icon>
          {{ item.name }}
        </vxe-button>
      </template>
    </vxe-button>
  </div>
</template>
<script>
export default {
  name: "ButtonIcon",

  props: {
    params: Object,
    renderOpts: Object,
  },
  data() {
    return {
      defaultparams: { button: "", code: "" },
      showMenu: false,
      selectRecords: [],
      disabled: false,
      gridEvents: {},
    };
  },
  watch: {
    "renderOpts.button.selectRecords": {
      handler: function (val) {
        this.selectRecords = val;
        this.setButtonStatue(val.length);
      },
    },
  },
  mounted() {
    Object.assign(this.defaultparams, this.params);

    this.defaultparams["button"] = this.params.button.buttonRender.button;

    if (this.defaultparams["button"]["children"].length > 0) {
      this.showMenu = true;
    }
    this.defaultparams["code"] = this.defaultparams["button"].code;
    this.setButtonStatue(0);
  },
  methods: {
    buttonClick(data, trigger = false) {
      if (!trigger) {
        data["selectRecords"] = this.selectRecords;
        this.defaultparams.$grid.triggerToolbarBtnEvent(data);
      }
    },
    setButtonStatue(selectRecordsLen) {
      if (
        typeof this.defaultparams.button.gridEvents[
          "disable_" + this.defaultparams.button.code
        ] == "function"
      ) {
        let disable = this.defaultparams.button.gridEvents[
          "disable_" + this.defaultparams.button.code
        ]({
          button: this.defaultparams.button,
          grid: this.grid,
        });
        if (disable === true || disable === false) {
          this.disabled = disable;
          return;
        }
      }
      switch (this.renderOpts.button.model_id) {
        case 1:
          this.disabled = selectRecordsLen == 1 ? false : true;
          break;
        case 2:
          this.disabled = selectRecordsLen >= 1 ? false : true;
          break;
        case 3:
          break;
      }
    },
  },
};
</script>
<style scope>
.vxe-toolbar .vxe-button--item .toolbar-btn {
  color: aliceblue;
  font-weight: bold;
  font-size: 13px;
}
.vxe-toolbar .vxe-button--item .is--disabled {
  background-color: #bebebe;
}
</style>
